<template>
  <div class="slide_Box">
    <div class="slide">
    <ul>
      <li v-for="item in slideArr" :key="item.id">
        <img :src="item.img" alt="">
        <div class="name">{{item.name}}</div>
      </li>
    </ul>
  </div>
  <div class="btn">
    <div class="lBtn"><i class="iconfont icon-left"></i></div>
    <div class="rBtn"><i class="iconfont icon-right"></i></div>
  </div>
  </div>
  
</template>
<script>
export default {
  name: "slide",
  data() {
    return {
      slideArr: [
        {
          img: "./../../static/image/IPhone1@2x.png",
          name: "开屏引导页"
        },
        {
          img: "./../../static/image/IPhone2@2x.png",
          name: "Banner位"
        },
        {
          img: "./../../static/image/IPhone3@2x.png",
          name: "开屏引导页"
        }
        // {
        //   img: "./../../static/image/IPhone3@2x.png",
        //   name: "开屏引导页1"
        // },
        // {
        //   img: "./../../static/image/IPhone3@2x.png",
        //   name: "开屏引导页2"
        // }
      ]
    };
  }
};
</script>
<style lang="scss">
.slide_Box {
  position: relative;
  .slide {
    position: relative;
    margin: 50px auto;
    width: 600px;
    height: 450px;
    overflow: hidden;
    // background: saddlebrown;
    ul {
      position: absolute;
      left: 6px;
      top: 0;
      width: 1320px;
      height: 380px;
      -webkit-transition: left 0.4s ease-in-out;
      -o-transition: left 0.4s ease-in-out;
      transition: left 0.4s ease-in-out;
      li {
        // display: inline;
        float: left;
        width: 185px;
        height: 100%;
        margin-right: 12px;
        text-align: center;
        img {
          width: 170px;
        }
        .name {
          width: 160px;
          height: 40px;
          line-height: 40px;
          margin: 20px auto;
          color: #fe5411;
          border-radius: 20px;
          box-shadow: 0px 0px 15px 5px rgba(255, 83, 16, 0.15);
        }
      }
    }
  }
  .btn {
    position: absolute;
    top: 150px;
    width: 100%;
    height: 45px;
    padding: 0 160px;
    // background: sandybrown;
    line-height: 45px;
    .iconfont {
      font-size: 25px;
      color: #ff6700;
      cursor: pointer;
    }
    .lBtn {
      float: left;
    }
    .rBtn {
      float: right;
    }
  }
}
</style>
